<template>
    <ul class="nav-bar">
        <li @click="page='DefaultPage'">欢迎页</li>
        <li>
            <span>环境讲解</span>
            <ul class="child-menu">
                <li @click="page='ErrorPage'">模块化错误和静态资源</li>
                <li @click="page='StylePage'">单位件样式</li>
                <li @click="page='BuildPage'">模块项目打包</li>
            </ul>
        </li>
        <li>
            <span>Vue组合式</span>
            <ul class="child-menu">
                <li @click="page='CompositionPage'">组合式Api</li>
                <li @click="page='CompositionPage2'">组合式Api语法1</li>
                <li @click="page='CompositionPage3'">组合式Api语法2</li>
                <li @click="page='CompositionCart'">购物车</li>
            </ul>
        </li>
        <li>
            <span>异步请求</span>
            <ul class="child-menu">
                <li @click="page='AjaxPage'">axios的安装和基本使用</li>
            </ul>
        </li>
    </ul>
    <div class="box">
        <component :is="page"></component>
    </div>
</template>

<script>
import DefaultPage from "@/pages/DefaultPage.vue";
import ErrorPage from "@/pages/ErrorPage.vue";
import StylePage from "@/pages/StylePage.vue";
import BuildPage from "@/pages/BuildPage.vue";
import CompositionPage from "@/pages/CompositionPage.vue";
import CompositionPage2 from "@/pages/CompositionPage2.vue";
import CompositionPage3 from "@/pages/CompositionPage3.vue";
import CompositionCart from "@/pages/CompositionCart.vue";
import AjaxPage from "@/pages/AjaxPage.vue";

export default {
    components:{
        DefaultPage,ErrorPage,StylePage,BuildPage,CompositionPage,CompositionPage2,CompositionPage3,
        CompositionCart,AjaxPage
    },
    data() {
        return {
            page: "DefaultPage"
        }
    },
    watch:{
        page(nv){
            window.scroll(0,0);
            if(nv=="AjaxPage"&&!sessionStorage.getItem("token")){
                this.$showTip("请先登录","","error");
                this.page = "DefaultPage";
            }
            location.hash = nv;
        }
    },
    created () {
        let tempPage = location.hash;
        tempPage = tempPage.replace(/^#/,"");
        this.page = tempPage==""?"DefaultPage":tempPage;
    },
}
</script>

<style scoped>
.nav-bar{
    /* 粘性定位 */
    position: sticky;
    top: 0px;
    left: 0px;
    height: 60px;
    line-height: 60px;
    display: flex;
    list-style: none;
    padding: 0px;
    margin: 0px;
    background-color: #333;
    box-shadow: 0 0 8px #666;
    padding: 0px 10px;
    z-index: 999;
}
.nav-bar>li{
    color:white;
    height: 100%;
    padding: 0px 10px;
    cursor: pointer;
    position: relative;
}
.nav-bar>li>span::after{
    font-family: "iconfont" !important;
    font-size: 18px;
    content: "\e620";
}
.nav-bar>li:hover{
    background-color: #932d08;
}
.nav-bar>li:hover .child-menu{
    display: block;
}
.nav-bar .child-menu{
    position: absolute;
    top: 60px;
    left: 0px;
    background-color: #555;
    list-style: none;
    padding: 0px;
    margin: 0px;
    box-shadow: 0 0 8px #888;
    display: none;
}
.nav-bar .child-menu>li{
    width: 220px;
    padding: 6px 16px;
    line-height: 2;
}
.nav-bar .child-menu>li:hover{
    background-color: #932d08;
}
.box{
    padding: 20px;
}
</style>